<template>
  <div class="blog-container">
    <h1 class="blog-title">我们的品牌</h1>
    <div class="blog-slider">
      <div
        class="blog-wrapper"
        :style="{ transform: `translateX(-${currentIndex * (100 / itemsPerView)}%)` }"
      >
        <div class="blog-card" v-for="(blog, index) in blogs" :key="index">
<!--          <img :src="blog.logoUrl" :alt="blog.name" class="blog-image" />-->
          <el-image :src="blog.logoUrl" fit="cover" :preview-src-list="[blog.logoUrl]" lazy
             class="blog-image"/>
          <div class="blog-content">
            <div class="blog-date">{{ blog.name }}</div>
            <!-- 使用 truncate 方法处理 description -->
            <div class="blog-description">{{ truncate(blog.description, 30) }}</div>
            <a href="#" class="read-more">阅读更多</a>
          </div>
        </div>
      </div>
    </div>
    <div class="dots">
      <div
        v-for="(dotIndex, index) in dotsCount"
        :key="index"
        class="dot"
        :class="{ active: Math.floor(currentIndex / itemsPerView) === index }"
        @click="setCurrentIndex(index * itemsPerView)"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BlogSlider",
  data() {
    return {
      currentIndex: 0, // 当前索引
      timer: null, // 定时器
      blogs: [], // 博客数据
      itemsPerView: 4, // 每页显示的卡片数量
    };
  },
  created() {
    this.getBrands();
  },
  computed: {
    dotsCount() {
      // 计算需要的分页点数
      return Math.ceil(this.blogs.length / this.itemsPerView) || 1;
    },
  },
  methods: {
    getBrands() {
      this.$api.home.getBrandList().then((res) => {
        if (res.code === 200) {
          this.blogs = res.data;
        }
      });
    },
    setCurrentIndex(index) {
      this.currentIndex = index;
    },
    next() {
      // 滑动到下一个
      if (this.currentIndex < this.blogs.length - this.itemsPerView) {
        this.currentIndex++;
      } else {
        this.currentIndex = 0; // 回到起点
      }
    },
    prev() {
      // 滑动到上一个
      if (this.currentIndex > 0) {
        this.currentIndex--;
      } else {
        this.currentIndex = Math.max(
          this.blogs.length - this.itemsPerView,
          0
        ); // 回到最后
      }
    },
    startAutoPlay() {
      // 开始自动轮播
      if (!this.timer) {
        this.timer = setInterval(this.next, 8000);
      }
    },
    stopAutoPlay() {
      // 停止自动轮播
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    // 新增：截断字符串的方法
    truncate(text, length) {
      if (!text) return "";
      return text.length > length ? text.slice(0, length) + "..." : text;
    },
  },
  mounted() {
    this.startAutoPlay(); // 启动自动轮播
  },
  beforeUnmount() {
    this.stopAutoPlay(); // 清理定时器
  },
};
</script>

<style scoped>
.blog-container {
  max-width: 1200px;
  margin: 10px auto;
  padding: 20px;
}

.blog-title {
  text-align: center;
  margin-bottom: 40px;
  font-size: 24px;
}

.blog-slider {
  position: relative;
  overflow: hidden;
}

.blog-wrapper {
  display: flex;
  transition: transform 0.3s ease;
}

.blog-card {
  min-width: calc(25% - 20px); /* 默认 4 个一页 */
  margin: 0 10px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.blog-image {
  width: 100%;
  height: 280px;
  object-fit: cover; /* 防止图片变形 */
}

.blog-content {
  padding: 15px;
}

.blog-date {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
}

.blog-description {
  margin-bottom: 15px;
  color: #333;
  word-break: break-word;
}

.read-more {
  display: inline-block;
  color: #4CAF50;
  text-decoration: none;
  font-size: 14px;
}

.dots {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ddd;
  margin: 0 5px;
  cursor: pointer;
}

.dot.active {
  background: #4CAF50;
}

@media (max-width: 1024px) {
  .blog-card {
    min-width: calc(50% - 20px); /* 2 个一页 */
  }
}

@media (max-width: 768px) {
  .blog-card {
    min-width: calc(100% - 20px); /* 1 个一页 */
  }
}
</style>